<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        v-on:keydown:键盘按下事件
        v-on:keyup:键盘点击事件

        可以通过上述两个的事件event的keyCode进行判断
        比如Enter键的keyCode == 13
        则可以在方法中进行判断  if(event.keyCode === 13) 进行判断执行

        但是在vue中有进行优化:
        1.Vue中常见的按键别名
            回车  =>  enter
            删除  =>  delete
            退出  =>  esc
            空格  =>  spack
            换行  =>  tap
            上    =>  up
            下    =>  down
            左    =>  legt
            右    =>  right
            例如： @keyup.enter="xxx" = > 当键盘点击enter键，抬起时进行回调函数 xxx


        2.Vue中没有提供别名的按键，可以使用原始的key值去绑定，但是主要要转成 kebab-case(短横线命名)
        其中也有特别的情况，如切换大小写的按键CapsLock 两个单词的需要的别名就是 @keyup.caps-lock="xxx"
            ：全部进行小写，且两个单词之间用'-'进行分离，可以使用event.key获取按键的别名，但是需要小写
        
        3.系统修饰符(用法特殊):ctrl\allt\shift\meta(Win键)    
            (1).配合keyup使用：按键本身的功能会先进行执行，方法的调用会后执行
            (2).配合keydown使用: 正常触发事件

        4.Vue.config.keyCodes.自定义键别名 = 键码     可以自定义键盘别名
            如:  Vue.config.keyCodes.dada = 13
                @keydown.dada="xxxx"  ===  @keydown.enter="xxxx"
    -->

    <!-- 准备好一个容器 -->
     <div id="root">
        <input type="text" @keydown="showInfo">  <br/>
     </div>


     <script>
        const vm = new Vue({
            el:'#root',
            methods: {
                showInfo(event){
                    console.log(event.keyCode)
                    console.log(event.target.value)
                    console.log(event)
                }
            },
        })
     </script>
    
</body>
</html>